//请求分类列表, 渲染分类位置内容
getCateList()
function getCateList() {
  // 直接发送请求
  $.get('http://localhost:8888/goods/category', res => {
    console.log(res)

    // 渲染分类内容
    let str = `<li class="active">全部</li>`
    res.list.forEach(item => {
      str += `<li>${ item }</li>`
    })
    $('.category').html(str)
  })
}
getCateAddress()
function getCateAddress() {
  // 直接发送请求
  $.get('http://localhost:8888/goods/campuls', res => {
    console.log(res)
    // 渲染校区内容
    let str = `<li class="active">全部</li>`
    res.list.forEach(item => {
      str += `<li>${ item }</li>`
    })
    $('.campuls').html(str)
  })
}

//请求商品列表渲染页面
// 准备请求需要用到的参数
const info = {
  current: 1,
  pagesize: 12,
  search: '',
  campuls: '',
  qualityType: 10,
  sortType: 'id',
  sortMethod: 'ASC',
  category: ''
}

// 提前准备变量, 接受一共多少页
let totalPage = 1

// 请求列表数据
getGoodsList()
function getGoodsList() {
  // 发送请求
  $.get('http://localhost:8888/goods/list', info, res => {
    // 给全局变量赋值
    totalPage = res.total
    // 执行渲染页面的操作了
    bindHtml(res)
  })
}

// 渲染页面
function bindHtml(res) {
  //判断当前页如果是第一页, 那么 left 按钮有 disable 类名
  if (info.current === 1) $('.left').addClass('disable')
  else $('.left').removeClass('disable')

  // 判断当前页如果是最后一页, 那么 right 按钮有 disable 类名
  if (info.current === res.total) $('.right').addClass('disable')
  else $('.right').removeClass('disable')

  // 渲染统计位置
  $('.total').text(`${ info.current } / ${ res.total }`)

  //渲染一页显示多少条
  $('select').val(info.pagesize)

  // 渲染当前页
  $('.page').val(info.current)
  // 渲染商品列表
  let str = ``
  res.list.forEach(item => {
    str += `
      <li>
      <div class="show">
        <img src="${ item.goods_img }" alt="">
      </div>
        <div class="info">
          <p class="title">${ item.title }</p>
          <p class="price">
            <span class="current">￥ ${ item.price }</span>
          </p>
          <button goodsId="${ item.goods_id }">查看详情</button>
        </div>
      </li>
    `
  })
  $('.list').html(str)
}

// 各种事件的渲染
// 分类按钮
$('.category').on('click', 'li', function () {
  // 切换类名
  $(this).addClass('active').siblings().removeClass('active')

  //修改 数据
  info.category = $(this).text() === '全部' ? '' : $(this).text()
  // 因为切换分类会影响到一共多少页, 所以最好是把当前页回归到第一页
  info.current = 1

  //重新请求列表数据并渲染
  getGoodsList()
})

// 校区
$('.campuls').on('click', 'li', function () {
  // 切换校区
  $(this).addClass('active').siblings().removeClass('active')

  //修改数据
  info.campuls = $(this).text() === '全部' ? '' : $(this).text()
  info.current = 1

  //重新渲染页面
  getGoodsList()
})

// 成色
$('.quality').on('click', 'li', function () {
  // 切换成色
  $(this).addClass('active').siblings().removeClass('active')

  // 修改数据
  info.qualityType = $(this).attr('type')
  info.current = 1

  // 重新渲染页面
  getGoodsList()
})

// 排序
$('.sort').on('click', 'li', function () {
  // 切换
  $(this).addClass('active').siblings().removeClass('active')

  // 修改数据
  info.sortType = $(this).attr('type')
  info.sortMethod = $(this).attr('method')

  //重新渲染页面
  getGoodsList()
})

// 模糊搜索
$('.search').on('input propertychange', function () {
  // 修改 信息
  info.search = $(this).val().trim()
  info.current = 1

  //重新渲染页面
  getGoodsList()
})

// 各种分页信息
$('.left').on('click', function () {
  if ($(this).hasClass('disable')) return

  // 修改 info 中的信息
  info.current--

  // 重新渲染页面
  getGoodsList()
})

$('.right').on('click', function () {
  if ($(this).hasClass('disable')) return

  // 修改 info 中的信息
  info.current++

  // 重新渲染页面
  getGoodsList()
})

$('select').on('change', function () {
  // 修改 info 中的数据
  info.pagesize = $(this).val()
  info.current = 1

  // 2. GoodsList()
})

$('.jump').on('click', function () {
  // 拿到文本框中的文本内容
  let page = $('.page').val()

  // 对 page 进行一些判断
  // 判断非数字, 我们直接使用 1
  if (isNaN(page)) page = 1
  // 判断 小于 1, 直接使用 1
  if (page <= 1) page = 1
  // 判断 大于 总页数, 直接使用总页数
  if (page >= totalPage) page = totalPage

  // 修改 info 内的信息
  info.current = page

  // 重新渲染页面
  getGoodsList()
})



//切换详情页面
$('.list').on('click', 'li .info button', function (e) {
  // 拿到商品 id, 存储在 lcoalStorage 内
  // 在详情页面就知道是点击的哪一个商品跳转过去的
  e.preventDefault()
  window.localStorage.setItem('goodsId', $(this).attr('goodsId'))
  // 跳转页面
  window.location.href = './detail.html'
})
